<template>
  <Layout class="p-5 bg-white">
    <Form :label-width="80" :rules="ruleValidate" ref="addPro" :model="addPro">
      <FormItem class="w-50" label="项目名称" prop="pro.proName">
        <Input
          v-model="addPro.pro.proName"
          placeholder="请输入项目名称"
        ></Input>
      </FormItem>

      <FormItem class="w-50" label="项目简介">
        <Input
          v-model="addPro.pro.proInfo"
          placeholder="请输入项目简介"
        ></Input>
      </FormItem>

      <FormItem class="w-50" label="项目所在地">
        <Input
          v-model="addPro.pro.proAddr"
          placeholder="请输入项目所在地"
        ></Input>
      </FormItem>

      <FormItem class="w-50" label="项目负责人" prop="pro.proLead">
        <Input
          v-model="addPro.pro.proLead"
          placeholder="请输入项目负责人"
        ></Input>
      </FormItem>
      <FormItem class="w-50" label="项目负责人电话">
        <Input
          v-model="addPro.pro.leadTel"
          placeholder="请输入项目负责人电话"
        ></Input>
      </FormItem>
      <FormItem class="w-50" label="时间">
        <Date-picker
          format="yyyy-MM-dd HH:mm:ss"
          :value="addPro.pro.datetime"
          class="w-100"
          type="datetime"
          @on-change="proDateTime"
          placeholder="请输入项目创建时间"
        ></Date-picker>
      </FormItem>
      <FormItem class="w-50" label="设备">
        <CheckboxGroup v-model="checkAllGroup">
          <Checkbox v-for="item in equList" :label="item.tableId">{{
            item.equipmentName
          }}</Checkbox>
        </CheckboxGroup>
      </FormItem>

      <FormItem class="text-right">
        <Button @click="submit" type="primary">提交</Button>
        <Button @click="cancel" class="ml-2">取消</Button>
      </FormItem>
    </Form>
  </Layout>
</template>

<script>
export default {
  data() {
    return {
      ruleValidate: {
        'pro.proName': [
          {
            required: true,
            message: '项目名称不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        'pro.proLead': [
          {
            required: true,
            message: '项目负责人不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
      },
      checkAllGroup: [],
      equList: [],
      addPro: {
        pro: {
          proName: '',
          proInfo: '',
          proAddr: '',
          proLead: '',
          leadTel: '',
          statu: 1,
          datetime: '',
        },
        equIdsStr: '',
      },
      proId: '',
    }
  },
  created: function(proId) {
    this.proId = this.$route.params.proId
    this.searchEqu()
    this.searchPro()
    this.searchProEquRef()
  },
  methods: {
    searchPro: function() {
      this.http
        .get({
          url: `/pro/${this.proId}`,
        })
        .then((data) => {
          this.addPro.pro = data
        })
    },
    searchProEquRef: function() {
      this.http
        .get({
          url: `/pro_equ_ref/list/${this.proId}`,
        })
        .then((data) => {
          data.forEach((element) => {
            this.checkAllGroup.push(element.tableId)
          })
        })
    },
    searchEqu: function() {
      this.http
        .get({
          url: '/equipment/list',
          param: { id: null, equipmentName: null, statu: 1 },
        })
        .then((data) => {
          this.equList = data
        })
    },
    proDateTime(change) {
      this.addPro.pro.datetime = change
    },
    submit: function() {
      if (this.$data.addPro.pro.proName.trim().length === 0) {
        this.message.error('项目名称必须输入')
        return
      }
      if (this.$data.addPro.pro.proName.indexOf(' ') > -1) {
        this.message.error('项目名称中不能有空格')
        return
      }
      if (this.$data.addPro.pro.proLead.trim().length === 0) {
        this.message.error('项目负责人必须输入')
        return
      }
      if (this.$data.addPro.pro.proLead.indexOf(' ') > -1) {
        this.message.error('项目负责人不能有空格')
        return
      }
      var str = ''
      for (let item in this.$data.checkAllGroup) {
        var str = str.concat(this.$data.checkAllGroup[item] + ',')
      }
      this.addPro.equIdsStr = str.substr(0, str.length - 1)
      let self = this
      this.http
        .put({
          url: '/pro',
          param: { proEquPOJOStr: self.$data.addPro },
        })
        .then((data) => {
          self.message.info('新增成功')
          this.$tabs.close()
        })
    },
    cancel: function() {
      this.$tabs.close()
    },
  },
  destroyed: function() {
    this.$router.push({
      name: 'program',
    })
  },
}
</script>

<style></style>
